<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加角色</title>
    <link rel="stylesheet" th:href="@{/src/css/layui.css}">
    <link rel="stylesheet" th:href="@{/src/zTree_v3/css/zTreeStyle/zTreeStyle.css}">
</head>
<body>
<form class="layui-form" style="width:80%;" id="roleForm">
    <!-- 权限提交隐藏域 -->
    <input type="hidden" id="menuId" name="menuId"/>
    <div class="layui-form-item">
        <label class="layui-form-label">角色名</label>
        <div class="layui-input-block">
            <input type="text" id="roleName" class="layui-input userName" lay-verify="required"
                   placeholder="请输入角色名" name="roleName">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">职责描述</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入角色职责描述" class="layui-textarea linksDesc"
                      lay-verify="required" name="duty" ></textarea>
        </div>
    </div>
    <!--权限树tree  -->
    <div class="layui-form-item">
        <label class="layui-form-label">分配权限：</label>
        <ul id="authoritytree" class="ztree" style="width:200px;margin-left: 105px"></ul>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="addRole">立即提交</button>
        </div>
    </div>
</form>
<script th:src="@{/src/layui.js}"></script>
<script th:src="@{/src/js/jquery-1.9.1.min.js}"></script>
<script th:src="@{/src/zTree_v3/js/jquery.ztree.all.js}"></script>
<script>
    //ztree的加载
    $(function () {
        var setting ={
            data: {
                simpleData: {
                    //设置树形为收缩状态
                    enable:true,
                    //节点自身的id
                    idKey: 'id',
                    //节点的父id
                    pIdKey: 'parentId'
                },
                key: {
                    //节点显示的名称
                    name: 'title',
                    //鼠标悬停在节点上提示的文本信息
                    title: 'title'
                }
            },
            check:{
                //使用复选框
                enable:true
            },
            view:{
                //显示图标
                showIcon:true
            }
        }
        //异步加载权限树
        $.ajax({
            url:'/menus/loadTree',
            dataType:"json",
            type:"get",
            success:function (result) {
                //初始化tree
                $.fn.zTree.init($("#authoritytree"),setting,result);
            }
        })
    });

    //提交新增角色信息
    layui.use(['form',"jquery",'layer'],function () {
        var form = layui.form,
            $ = layui.jquery,
            layer = layui.layer;
        form.on("submit(addRole)",function () {
            //获取ztree的数据
            var tree =  $.fn.zTree.getZTreeObj("authoritytree");
            //获取被选中的节点数据
            var arr = tree.getCheckedNodes(true);
            var str = "";
            $.each(arr,function (index,obj) {
                str += obj.id+",";
            })
            str = str.substring(0,str.length-1);
            //将所有选中的菜单id拼接成字符串，存储在隐藏域中。
            $("#menuId").val(str);
            $.ajax({
                url:'/roles/saveRole',
                data:$("#roleForm").serialize(),
                type:'post',
                dataType:'json',
                success:function (result) {
                    if(result.code == 200){
                        layer.msg('添加成功',{icon:1},function () {
                            top.layer.closeAll('iframe');
                            parent.location.reload();
                        })
                    }else{
                        layer.msg(result.message,{icon:5});
                    }
                }
            })
            return false;
        })
    })

    
</script>
</body>
</html>